<template>
	<div class="map-panel-container">
		<div ref="mapRef" class="map-content"></div>
	</div>
</template>

<script setup lang="ts">
import { ref, onMounted, shallowRef } from "vue";
import * as echarts from "echarts/core";
import { color } from "echarts";

type Location = {
	[key: string]: [number, number];
};

const mapRef = ref<HTMLElement | null>(null);
const myChart = shallowRef<echarts.EChartsType | null>(null);

const locations: Location = {
	锦江区: [104.1151, 30.60117],
	大邑县: [103.364446, 30.61507],
	金堂县: [104.608828, 30.722683],
	新津区: [103.825572, 30.422245]
};

const customerBatteryCityData: { name: string, value: number }[] = [
	{ name: "锦江区", value: 57 },
	{ name: "大邑县", value: 56 },
	{ name: "金堂县", value: 56 },
	{ name: "新津区", value: 90 }
];


// 动态计算柱形图的高度（定一个max）
function lineMaxHeight() {
	const maxValue = Math.max(...customerBatteryCityData.map((item) => item.value));
	return 0.48 / maxValue;
}
// 柱状体的主干
function lineData() {
	return customerBatteryCityData.map((item) => {
		return {
			coords: [locations[item.name], [locations[item.name][0], locations[item.name][1] + item.value * lineMaxHeight()]],
		};
	});
}
// 柱状体的顶部
function scatterData() {
	return customerBatteryCityData.map((item) => {
		return [locations[item.name][0], locations[item.name][1] + item.value * lineMaxHeight(), item];
	});
}
// 柱状体的底部
function scatterData2() {
	return customerBatteryCityData.map((item) => {
		return {
			name: item.name,
			value: locations[item.name],
		};
	});
}
const resizeChart = () => myChart.value?.resize();

const initChartMap = async () => {
	if (mapRef.value) {
		myChart.value = echarts.init(mapRef.value);
		const response = await fetch("/src/assets/json/610000.json", {
			credentials: "include",
		});
		// const zoom = 1.1
		if (response.ok) {
			const mapJson = await response.json();
			echarts.registerMap("chengdu", mapJson);
			// 2d地图
			// let option = {

			// 	tooltip: {
			// 		trigger: "item",
			// 		show: true,
			// 		enterable: true,
			// 		textStyle: {
			// 			fontSize: 14,
			// 			color: "#fff",
			// 		},
			// 		backgroundColor: "rgba(0,2,89,0.8)",
			// 		formatter: "{b}<br />",
			// 	},
			// 	geo: [
			// 		{
			// 			map: "chengdu",
			// 			aspectScale: 1.5,
			// 			roam: false,
			// 			zoom: zoom,
			// 			layoutSize: "95%",
			// 			layoutCenter: ["48%", "48%"],
			// 			itemStyle: {
			// 				normal: {
			// 					borderType: "dashed",
			// 					borderWidth: 1, //边框大小
			// 					borderColor: "#59FFCC",
			// 					areaColor: "#2A5193", //背景颜色
			// 				},
			// 				emphasis: {
			// 					areaColor: "#66BA83",
			// 				},
			// 			},
			// 			emphasis: {
			// 				itemStyle: {
			// 					areaColor: "#59FFCE",
			// 				},
			// 			},
			// 			zlevel: 3,
			// 		},
			// 		{
			// 			map: "chengdu",
			// 			aspectScale: 1.5,
			// 			roam: false, // 是否允许缩放
			// 			zoom: zoom, // 默认显示级别
			// 			layoutSize: "95%",
			// 			layoutCenter: ["48.5%", "50%"],
			// 			itemStyle: {
			// 				normal: {
			// 					shadowColor: "#2C99F6",
			// 					shadowOffsetY: 0,
			// 					shadowBlur: 120,
			// 					areaColor: "#12B5FF",
			// 				},
			// 			},
			// 			zlevel: 2,
			// 			silent: true,
			// 		},
			// 		{
			// 			map: "chengdu",
			// 			aspectScale: 1.5,
			// 			roam: false, // 是否允许缩放
			// 			zoom: zoom, // 默认显示级别
			// 			layoutSize: "95%",
			// 			layoutCenter: ["48.5%", "52%"],
			// 			itemStyle: {
			// 				areaColor: "#005FFF",
			// 			},
			// 			zlevel: 1,
			// 			silent: true,
			// 		},
			// 	],
			// 	series: [
			// 		{
			// 			geoIndex: 0,
			// 			coordinateSystem: "geo",
			// 			showLegendSymbol: true,
			// 			type: "map",
			// 			roam: true,
			// 			label: {
			// 				normal: {
			// 					show: true,
			// 					textStyle: {
			// 						color: "#fff",
			// 					},
			// 				},
			// 				emphasis: {
			// 					show: true,
			// 					textStyle: {
			// 						color: "#fff",
			// 					},
			// 				},
			// 			},
			// 			itemStyle: {
			// 				normal: {
			// 					borderColor: "#2ab8ff",
			// 					borderWidth: 1.5,
			// 					areaColor: "#12235c",
			// 				},
			// 				emphasis: {
			// 					areaColor: "#10346D",
			// 					borderWidth: 0,
			// 				},
			// 			},
			// 			map: "chengdu", // 使用
			// 			data: customerBatteryCityData,
			// 		},
			// 		// 柱状体的主干
			// 		{
			// 			type: "lines",
			// 			zlevel: 5,
			// 			effect: {
			// 				show: false,
			// 				symbolSize: 5, // 图标大小
			// 			},
			// 			lineStyle: {
			// 				width: 10,
			// color: {
			// 	type: 'linear',
			// 	x: 0,
			// 	y: 0,
			// 	x2: 0,
			// 	y2: 1,
			// 	colorStops: [{
			// 		offset: 0,
			// 		color: '#81f6fc'
			// 	}, {
			// 		offset: 1,
			// 		color: '#fcddfc'
			// 	}]
			// },
			// 				opacity: 1,
			// 				curveness: 0,
			// 			},
			// 			label: {
			// 				show: 0,
			// 				position: "end",
			// 				formatter: "245",
			// 			},
			// 			silent: true,
			// 			data: lineData(),
			// 		},
			// 		// 柱状体的顶部
			// 		{
			// 			type: "scatter",
			// 			coordinateSystem: "geo",
			// 			geoIndex: 0,
			// 			zlevel: 5,
			// 			label: {
			// 				show: true,
			// 				color: "#fff",
			// 				backgroundColor: "#0c2863",
			// 				borderColor: "#2abeed",
			// 				padding: [10, 15],
			// 				borderWidth: 1,
			// 				borderRadius: 3,
			// 				textStyle: {
			// 					color: "#ccc",
			// 					fontSize: 12,
			// 					fontFamily: "YouSheBiaoTiHei-2",
			// 					lineMaxHeight: 20,
			// 				},
			// 				formatter: function (params: any) {
			// 					return `{name|${params.data[2].name}} \n 人力成本: ${params.data[2].value}`;
			// 				},
			// 				rich: {
			// 					name: {
			// 						color: "#fff",
			// 						fontSize: 14,
			// 						fontFamily: "YouSheBiaoTiHei-2",
			// 						padding: [0, 0, 10, 0],
			// 					},
			// 				},
			// 				position: "top",
			// 			},
			// 			symbol: "circle",
			// 			symbolSize: [10, 5],
			// 			itemStyle: {
			// 				color: "#81f6fc",
			// 				opacity: 1,
			// 			},
			// 			silent: true,
			// 			data: scatterData(),
			// 		},
			// 		// 柱状体的底部
			// 		{
			// 			type: "scatter",
			// 			coordinateSystem: "geo",
			// 			geoIndex: 0,
			// 			zlevel: 4,
			// 			label: {
			// 				formatter: "{b}",
			// 				position: "bottom",
			// 				color: "#fff",
			// 				fontSize: 12,
			// 				distance: 10,
			// 				show: true,
			// 			},
			// 			symbol: "circle",
			// 			symbolSize: [10, 5],
			// 			itemStyle: {
			// 				// color: '#F7AF21',
			// 				color: "#81f6fc",
			// 				opacity: 1,
			// 			},
			// 			silent: true,
			// 			data: scatterData2(),
			// 		},
			// 		// 底部外框
			// 		{
			// 			type: "scatter",
			// 			coordinateSystem: "geo",
			// 			geoIndex: 0,
			// 			zlevel: 4,
			// 			label: {
			// 				show: false,
			// 			},
			// 			symbol: "circle",
			// 			symbolSize: [20, 10],
			// 			itemStyle: {
			// 				color: {
			// 					type: "radial",
			// 					x: 0.5,
			// 					y: 0.5,
			// 					r: 0.5,
			// 					colorStops: [
			// 						{
			// 							offset: 0,
			// 							color: "rgb(22,255,255, 0)",
			// 						},
			// 						{
			// 							offset: 0.75,
			// 							color: "rgb(22,255,255, 0)",
			// 						},
			// 						{
			// 							offset: 0.751,
			// 							color: "rgb(22,255,255, 1)",
			// 						},
			// 						{
			// 							offset: 1,
			// 							color: "rgb(22,255,255, 1)",
			// 						},
			// 					],
			// 					global: false,
			// 				},

			// 				opacity: 1,
			// 			},
			// 			silent: true,
			// 			data: scatterData2(),
			// 		},
			// 	],
			// };
			// 3d地图
			let option = {
				geo3D: {
					map: 'chengdu',
					show: true,
					zlevel: -1, // 必须设置，

					viewControl: {
						distance: 120,
						alpha: 20,
						beta: 0,
						minBeta: -360,
						maxBeta: 720
					},

					itemStyle: {
						color: "#2a5193",
						opacity: 1,
						borderWidth: 1.5,
						borderColor: "#3ea6b8",
					},
					label: {
						show: true,
						distance: 0,
						color: '#000',
						padding: [6, 4, 2, 4],
						borderRadius: 4,
						backgroundColor: 'rgba(255,255,255,.66)',
						textStyle: {
							fontSize: 14,
							color: "#E87813",
							borderWidth: 0,
							borderColor: '#000',
						}
					},
					emphasis: {
						label: {
							show: true,
							color: "#ff0000",
						},
						itemStyle: {
							color: '#e2cd00',
						}
					},
					regions: [

					]
				},
				series: [
					{
						type: 'map3D',
						map: 'chengdu',
						viewControl: {
							distance: 120,
							alpha: 20,
							beta: 0,
							minBeta: -360,
							maxBeta: 720,
						},

						emphasis: {
							label: {
								show: false,
							},
							itemStyle: {
								// show: false,
								color: '#fff',
								shadowColor: "#8cd3ef",
								hadowOffsetY: 10,
								shadowBlur: 180,
							}
						},
					},
					{
						name: "锦江区",
						type: 'bar3D',
						coordinateSystem: 'geo3D',
						shading: 'lambert',
						label: {
							show: true,
							position: "top",
							padding: [10, 15],
							color: "#fff",
							borderRadius: 4,
							backgroundColor: '#0c2863',
							textStyle: {
								fontSize: 14,
								color: "#ccc",
								borderWidth: 0,
								borderColor: '#000',
								lineMaxHeight: 20,
							},
							formatter: (params: any) => {
								return `{name|${params.data.name}} \n 人力成本: ${params.data.value[2]}`;
							},
							rich: {
								name: {
									color: "#fff",
									fontSize: 14,
									fontFamily: "YouSheBiaoTiHei-2",
									padding: [0, 0, 10, 0],
								},
							},
						},
						data: [
							{
								name: "锦江区",
								value: [
									104.1151,
									30.60117,
									20
								]
							}

						],
						barSize: 2,
						minHeight: 1,
						itemStyle: {
							color: "#8cf3fc",
						},
						emphasis: {
							label: { show: true },
						},
					}
				]
			}
			myChart.value.setOption(option);
			window.addEventListener("resize", resizeChart);
		}
	}
};

onMounted(() => {
	initChartMap();
});
</script>

<style lang="less" scoped>
@import "../variables.less";

.map-panel-container {
	width: 100%;
	flex-grow: 1;
	position: relative;
	overflow: hidden;
	border-radius: 5px;
	min-height: 300px;
	padding: 5px;
	display: flex;
	flex-direction: column;
}

.map-panel-title {
	font-size: 16px;
	color: #0ce0ff;
	padding: 10px @panel-padding 5px @panel-padding;
	flex-shrink: 0;
}

.map-content {
	width: 100%;
	height: 100%;
	flex-grow: 1;
	position: relative;
	border-radius: 3px;
}
</style>
